<template>
  <div class="panelBody">
    <div class="operatePanel">
      <div>
        <el-input-number
          :min="100"
          v-model="parentState.formWidth"
          size="small"
          :controls="false"
          style="width: 60px"
        ></el-input-number>
        <span>x</span>
        <el-input-number
          :min="200"
          v-model="parentState.formHeight"
          size="small"
          :controls="false"
          style="width: 60px"
        ></el-input-number>
      </div>
      <div>
        <span>列数:</span>
        <el-input-number
          :min="6"
          v-model="parentState.colNum"
          size="small"
          style="width: 100px"
        ></el-input-number>
      </div>

      <el-button type="text" @click="handleOperate('saveJson')"
        >保存配置</el-button
      >

      <el-button type="text" @click="handleOperate('saveDefaultForm')"
        >保存表单</el-button
      >
      <el-button type="text" @click="handleOperate('loadJson')">加载</el-button>
      <el-button type="text" @click="handleOperate('saveDefaultCom')"
        >保存组件</el-button
      >
      <el-button type="text" @click="handleOperate('autoSave')">{{
        parentState.autoSave ? "取消保存" : "自动保存"
      }}</el-button>
      <el-button type="text" @click="handleOperate('copyTemplate')"
        >输出标签</el-button
      >
      <el-button type="text" @click="handleOperate('copy')">输出</el-button>
    </div>
    <div class="operatePanel">
      <el-button type="text" @click="handleOperate('isCom')"
        >切换至{{ parentState.isCom ? "表单" : "组件" }}</el-button
      >
      <el-button type="text" @click="handleOperate('isLock')">{{
        parentState.isLock ? "解锁" : "上锁"
      }}</el-button>
      <el-button
        type="text"
        @click="handleOperate('extendClick')"
        :disabled="parentState.isLock"
        >{{ parentState.extendClick ? "禁止选中" : "开启选中" }}</el-button
      >
      <el-button
        type="text"
        @click="handleOperate('extendDrag')"
        :disabled="parentState.isLock"
        >{{ parentState.extendDrag ? "禁止拖拽" : "开启拖拽" }}</el-button
      >
      <el-button type="text" @click="handleOperate('isBind')">{{
        parentState.isBind ? "解绑数据" : "绑定数据"
      }}</el-button>
      <el-button type="text" @click="handleOperate('useIf')">{{
        parentState.useIf ? "禁用v-if" : "使用v-if"
      }}</el-button>
      <el-button type="text" @click="handleOperate('autoSpan')">{{
        parentState.autoSpan ? "停止计算span" : "计算span"
      }}</el-button>
      <el-button type="text" @click="handleOperate('clearSpan')"
        >清除span
      </el-button>
      <el-button type="text" @click="handleOperate('clearOffset')"
        >清除offset
      </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
// @ts-nocheck
import {
  toCamelCase,
  deepClone,
  getCustomConfig,
  debounce
} from "../utils/utils"
const state = reactive({
  curSelect: "data"
})
const parentState = inject("state")
const mySaveForm = () => {}
const handleOperate = (prop) => {
  parentState[prop] = !parentState[prop]
}
let myEditor: any
onMounted(() => {})
</script>

<style lang="less" scoped>
.fullContent() {
  width: 100%;
  height: 100%;
}
.flexNormal() {
  width: 100%;
  height: 100%;
  display: flex;
}
.panelBody {
  flex-direction: column;
  overflow-y: auto;
  .flexNormal();
  .fullContent();
  .operatePanel {
    border-bottom: 1px solid pink;
    padding: 6px;
    flex: 1;
    width: calc(100% - 12px) !important;
    .flexNormal();
    height: fit-conetent;
    justify-content: space-around;
    span {
      font-size: 12px;
    }
  }
}
</style>
